<!DOCTYPE html>
<html lang="en">
	<!--
    【<head> 元素】包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
    可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
  -->
	<head>
		<!--
    【meta 标签】提供了元数据，元数据也不显示在页面上，但会被浏览器解析。
    比如字符编码、视口设置、描述和关键词、作者等。
    元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
    -->
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- 为搜索引擎定义描述和关键词（SEO）-->
		<meta name="description" content="HTML head 元素" />
		<meta name="keywords" content="HTML, head, 元素" />

		<!-- 定义作者 -->
		<meta name="author" content="张三" />

		<!-- 每3秒钟刷新当前页面/或重定向到其他页面 -->
		<meta http-equiv="refresh" content="3" />
		<!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com" /> -->

		<!-- 【title 标签】用于设置网页的标题，在 HTML/XHTML 文档中是必需的。当网页添加到收藏夹时，显示在收藏夹中的标题。 -->
		<title>004-HTML_head_元素</title>

		<!-- 【base 标签】定义页面中所有链接默认的链接目标地址。 -->
		<base href="https://www.baidu.com/" target="_blank" />

		<!-- 【link 标签】用于定义文档与外部资源的关系，比如样式表文件或RSS源文件，定义网页 icon 图标等。-->
		<link rel="shorcut icon" href="https://www.baidu.com/favicon.ico" />
		<!--
    CSS 脚本最好使用外部样式表，这样可以有效地避免网页内容的重复加载，提高网页的加载速度。
    引入方式：1. link 标签引入方式；2. <style> @import url("标签路径") </style> 规则引入方式。
    引入方式之间的差别：
    1. link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
    2. 当一个页面加载的时候，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。
    所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
    3. 当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。
    -->
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div style="color: red">
			<p>我是继承的父级字体颜色</p>
			<!-- 某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。 -->
			<a style="color: red" href="">百度（没有指定 href 属性值，则会使用 base 标签指定的地址）</a>
		</div>
	</body>
</html>
